<template>
  <div class="mod-config">
    <basic-container>
      <navigation :sign="{a:false,b:true,c:false,d:false,e:false}"></navigation>
      <div v-if="ymLoad" class="duiQitishi">
        <div class="tiShiTu">
          <img src="/images/qita/tishi.png" width="300">
        </div>
        <div class="tiShi">
          <div><b>您现在不是任何部门的奖金管理人员，无法进行奖金项设置的操作</b></div>
          <div class="font18 mt10">您可以通知系统管理员，为您设置具体的奖金管理部门！</div>
        </div>
      </div>
      <div class="boxsty zhiBiao" v-else>

        <div class="flex justifyContentSpaceBetween">
          <div class="tabletext">奖金项设置</div>
        </div>
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
          >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
              label-width="80px"
            >
              <el-form-item label="负责部门">
                <el-select v-model="deptId" placeholder="请选择负责部门" class="xiaLa mr20" @change="switchDepartment">
                  <el-option v-for="(item,index) in bmData" :key="index" :label="item.deptName"
                             :value="item.deptId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="奖金分类">
                <el-select :clearable="true" v-model="dataForm.jjxFl" placeholder="请选择奖金分类" class="xiaLa"
                           style="width: 90%">
                  <el-option v-for="(item,index) in  jjflOptions " :key="index" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="奖金项">
                <el-input v-model="dataForm.jjxMc" placeholder="请输入奖金项名称"></el-input>
              </el-form-item>
              <!--              <el-form-item label="使用状态">
                              <el-select :clearable="true" v-model="dataForm.jjxZt" placeholder="请选择使用状态" class="xiaLa">
                                <el-option v-for="(item,index) in  options " :key="index" :label="item.label" :value="item.value">
                                </el-option>
                              </el-select>
                            </el-form-item>-->
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  :disabled="deptId===''"
                  @click="getDataList(1)"
                  plain
                >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="height: 50px;">
          <el-tooltip
            class="item"
            effect="dark"
            content="新增奖金项信息"
            placement="top"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="addOrUpdateHandle()"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="批量删除选中"
            placement="top-start"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteBatch()"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="下载批量导入模板"
            placement="top"
          >
            <el-button icon="el-icon-download" size="small" type="warning" circle @click="exportTemplate"></el-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="批量导入"
            placement="top"
          >
            <!--   action="/admin/sys-file/upload"  -->
            <el-upload
              action='/jiangjin/jiangjinjjxxxb/importExcelFromTemplate'
              accept=".xlsx, .xls"
              :headers="headers"
              class="upload-demo inline-block"
              :before-upload="beforeAvatarUpload"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :show-file-list="false"
              :data="importData"
              style="padding-right:10px">
              <el-button icon="el-icon-upload" size="small" style="margin-left: 10px" type="success" circle></el-button>
            </el-upload>
          </el-tooltip>

          <div class="pull-right"></div>
        </div>
        <el-table :data="dataList"
                  ref="jjxTable"
                  v-loading="dataListLoading" stripe tooltip-effect="dark" height="460px"
                  border
                  class="avue-crud">
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column prop="" label="序号" :formatter="nShowIndex" width="80" header-align="center"
                           align="center"></el-table-column>
          <el-table-column prop="jjxMc" label="奖金项名称" min-width="150" header-align="center" align="center">
            <template slot-scope="{row}">
                <span
                  v-if="permissions.jiangjin_jiangjinjjxxxb_edit"
                  @click="addOrUpdateHandle(row.id)"
                  style="color: #0e258c; cursor: pointer"
                >{{ row.jjxMc }}</span>
              <span v-else>{{ row.jjxMc }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="jjxFl" label="奖金项分类" header-align="center" align="center" min-width="150">
          </el-table-column>
          <el-table-column prop="jjxSm" show-overflow-tooltip label="奖金项说明" min-width="300" header-align="center"
                           align="center">
          </el-table-column>
        </el-table>

        <div class="avue-crud__pagination">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                         :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                         layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  delObj,
  putObj,
  deleteBatch
} from '@/api/jiangjin/jiangjinjjxxxb'
import TableForm from './jiangjinjjxxxb-form'
import {
  mapGetters
} from 'vuex'
import {
  getJiangJinBm
} from '@/api/admin/dept'
import {
  remote as remoteDict
} from '@/api/admin/dict'
import store from "@/store";
import jjxxxbController from "@/api/jiangjin/jjxxxbController";


export default {
  data() {
    return {
      dataForm: {
        jjxMc: '',
        jjxZt: '',
        jjDeptId: '',
        jjxFl: ''
      },
      jjflOptions: [],
      bmData: [], //负责部门
      options: [{
        value: '1',
        label: '使用'
      }, {
        value: '0',
        label: '隐藏'
      }],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      deptId: '', //负责部门ID
      deptName: '', //负责部门名称
      ymLoad: false,
      //---------------搜索条------------------
      searchadvanced: true,
      searchheight: "0",
      //---------------导入导出-------------
      headers: {
        Authorization: "Bearer " + store.getters.access_token,
      },
      importData: {
        jjDeptId: undefined
      }
    }
  },
  components: {
    TableForm
  },
  created() {
    remoteDict("jingjinFenLei").then(response => {
      this.jjflOptions = response.data.data
    })
  },
  mounted() {
    this.getJiangJinJg();
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "50";
      }
    },
    //获取奖金管理人机构
    getJiangJinJg() {
      getJiangJinBm().then(res => {
        if (res.data.data != null && res.data.data.length > 0) {
          this.bmData.push(res.data.data)
          this.bmData = res.data.data
          this.ymLoad = false;
          this.deptId = "";
          this.deptName = "";
          this.deptId = res.data.data[0].deptId;
          this.deptName = res.data.data[0].name;
          this.importData.jjDeptId = this.deptId
          this.getDataList();
        } else {
          this.$notify.closeAll();
          this.ymLoad = true;
          //this.$notify.error("没有相关负责部门")
          //this.deptName = "无相关负责部门";
        }
      }).catch(err => {
        this.ymLoad = true;
      });
    },
    // 获取数据列表
    getDataList(page) {
      if (page) {
        this.pageIndex = page
      }
      this.dataListLoading = true
      this.$set(this.dataForm, "jjDeptId", this.deptId);
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
        this.dataListLoading = false
      })

    },
    //管理部门切换
    switchDepartment(deptid) {
      for (let a in this.bmData) {
        if (this.bmData[a].deptId == deptid) {
          this.deptId = this.bmData[a].deptId
          this.deptName = this.bmData[a].deptName
          this.importData.jjDeptId = this.deptId
          this.getDataList();
          break;
        }
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id, this.deptId);
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.closeAll()
        this.$message.success('删除成功')
        this.getDataList()
      })
    },

    nShowIndex(row, column, cellValue, index) {
      return index + 1 + this.pageSize * (this.pageIndex - 1);
    },
    jjxGyztFormater(row) {
      if (row.jjxGyzt == 1) {
        return "公用"
      } else if (row.jjxGyzt == 0) {
        return "私用"
      } else {
        return ""
      }
    },
    jjxZtFormater(row) {
      if (row.jjxZt == 1) {
        return "使用"
      } else if (row.jjxZt == 0) {
        return "隐藏"
      } else {
        return ""
      }
    },
    /**
     * 修改数据状态
     */
    addOrUpdateHandleJjZt(r) {
      var m = r.jjxZt == 1 ? '隐藏' : '使用'
      this.$confirm('是否将该条数据设为:' + m, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        var zt = r.jjxZt == 1 ? 0 : 1
        r.jjxZt = zt;
        return putObj(r)
      }).then(data => {
        this.$message.closeAll()
        this.$message.success('修改成功')
        this.getDataList()
      });
    },
    /**
     * 修改数据公用状态
     */
    addOrUpdateHandleJjGyZt(r) {
      var m = r.jjxGyzt == 1 ? '私用' : '公用'
      this.$confirm('是否将该条数据设为:' + m, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        var zt = r.jjxGyzt == 1 ? 0 : 1
        r.jjxGyzt = zt;
        return putObj(r)
      }).then(data => {
        this.$message.closeAll()
        this.$message.success('修改成功')
        this.getDataList()
      });
    },
    deleteBatch() {
      var data = this.$refs.jjxTable.selection;
      if (data.length == 0) {
        this.$message.closeAll();
        this.$message.error("请选择要删除的记录！");
        return;
      }
      var ids = [];
      for (var i = 0; i < data.length; i++) {
        ids.push(data[i].id);
      }
      var idsStr = ids.join(",");
      this.$confirm("是否要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return deleteBatch({ids: idsStr});
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    //--------------------导入导出------------
    /**
     * 文件上传前
     */
    beforeAvatarUpload(file) {
      this.loading = this.$loading({
        lock: true,
        text: '文件上传中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    /**
     * 文件上传成功到pigx的统计文件管理后转发
     */
    handleUploadSuccess(response, file, fileList) {
      this.loading.close()
      this.getDataList();
      if (response.data) {//如果解析数据中由特殊情况，向前台返回1，有错误数据返回2
      this.$message.closeAll()
        if (response.data == 2) {
          this.$message.error(response.msg)
        } else {
          this.$message.warning(response.msg)
        }
      } else {
        this.$message.success(response.msg)
      }
    },
    handleUploadError(response, file, fileList) {
      this.loading.close()
      this.$message.closeAll()
      this.$message.error('上传出错：' + response.message)
    },
    /**
     * 从静态地址汇总下载模板静态文件，复杂情况不能使用这种方式
     */
    exportTemplate() {
      //window.location.href = '../../static/已发奖金补充导入模板.xlsx'
      jjxxxbController.exportExcelForVue(this, "exportExcelForTemplate", {}, {})
    },
  }
}

</script>
